/*eslint-disable*/
import React from "react";
import { connect, useDispatch, useSelector } from "react-redux";
import { Creators as LoginCreators } from "redux/actions/login";
import { END } from "redux-saga";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Slide from "@material-ui/core/Slide";
import Dialog from "@material-ui/core/Dialog";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogContent from "@material-ui/core/DialogContent";
import DialogActions from "@material-ui/core/DialogActions";
import InputAdornment from "@material-ui/core/InputAdornment";
import Icon from "@material-ui/core/Icon";
// @material-ui/icons
import Close from "@material-ui/icons/Close";
import AccountCircle from "@material-ui/icons/AccountCircle";
import Mail from "@material-ui/icons/Mail";
import Face from "@material-ui/icons/Face";
import VpnKeyIcon from "@material-ui/icons/VpnKey";
// core components
import Button from "components/CustomButtons/Button.js";
import Card from "components/Card/Card.js";
import CardHeader from "components/Card/CardHeader.js";
import CardBody from "components/Card/CardBody.js";
import CustomInput from "components/CustomInput/CustomInput.js";

import javascriptStyles from "assets/jss/nextjs-material-kit-pro/pages/componentsSections/javascriptStyles.js";

const useStyles = makeStyles(javascriptStyles);
const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction="down" ref={ref} {...props} />;
});

Transition.displayName = "Transition";

function LoginModal() {
  const [loginModal, setLoginModal] = React.useState(false);
  const error = useSelector((state) => state.login.error);
  let valueObj = { email: "", password: "" };
  const [inputValues, setInputValues] = React.useState(valueObj);

  const classes = useStyles();
  const dispatch = useDispatch();

  const handleInputChange = (e) => {
    const { id, value } = e.target;
    console.log("handleInputChange===>", id, value);

    setInputValues({ ...inputValues, [id]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(inputValues);
    dispatch(LoginCreators.getRequest(inputValues));
  };
  return (
    <>
      {/* BUTTON LOGIN MODAL */}
      <Button
        color="transparent"
        block
        round
        onClick={() => setLoginModal(true)}
      >
        <AccountCircle /> 登录
      </Button>
      {/* LOGIN MODAL START */}
      <Dialog
        classes={{
          root: classes.modalRoot,
          paper: classes.modal + " " + classes.modalLogin,
        }}
        open={loginModal}
        TransitionComponent={Transition}
        keepMounted
        onClose={() => setLoginModal(false)}
        aria-labelledby="login-modal-slide-title"
        aria-describedby="login-modal-slide-description"
      >
        <Card plain className={classes.modalLoginCard}>
          <DialogTitle
            id="login-modal-slide-title"
            disableTypography
            className={classes.modalHeader}
          >
            <CardHeader
              plain
              color="primary"
              className={classes.textCenter + " " + classes.cardLoginHeader}
            >
              <Button
                simple
                className={classes.modalCloseButton}
                key="close"
                aria-label="Close"
                onClick={() => setLoginModal(false)}
              >
                {" "}
                <Close className={classes.modalClose} />
              </Button>
              <h5 className={classes.cardTitleWhite + " " + classes.textCenter}>
                <br /> 登录
              </h5>
              <div className={classes.socialLine}>
                <Button justIcon link className={classes.socialLineButton}>
                  <i className="fab fa-facebook-square" />
                </Button>
                <Button justIcon link className={classes.socialLineButton}>
                  <i className="fab fa-twitter" />
                </Button>
                <Button justIcon link className={classes.socialLineButton}>
                  <i className="fab fa-google-plus-g" />
                </Button>
              </div>
            </CardHeader>
          </DialogTitle>
          <DialogContent
            id="login-modal-slide-description"
            className={classes.modalBody}
          >
            <form>
              <p className={classes.description + " " + classes.textCenter}>
                继续即表示同意<a href="#">用户协议</a>、<a href="#">隐私政策</a>
              </p>
              <CardBody className={classes.cardLoginBody}>
                <CustomInput
                  id="email"
                  labelText="请输入邮箱..."
                  onChange={handleInputChange}
                  formControlProps={{
                    fullWidth: true,
                  }}
                  inputProps={{
                    endAdornment: (
                      <InputAdornment position="start">
                        <Mail className={classes.icon} />
                      </InputAdornment>
                    ),
                  }}
                />
                <CustomInput
                  labelText="请输入密码..."
                  id="password"
                  onChange={handleInputChange}
                  formControlProps={{
                    fullWidth: true,
                  }}
                  inputProps={{
                    endAdornment: (
                      <InputAdornment position="start">
                        <VpnKeyIcon className={classes.icon} />
                      </InputAdornment>
                    ),
                  }}
                />
              </CardBody>
            </form>
          </DialogContent>
          <DialogActions
            className={classes.modalFooter + " " + classes.justifyContentCenter}
          >
            <Button
              color="primary"
              simple
              size="lg"
              onClick={(e) => handleSubmit(e)}
            >
              登录
            </Button>
          </DialogActions>
          {error && (
            <p style={{ color: "red", textAlign: "center" }}>{error}</p>
          )}
        </Card>
      </Dialog>
      {/* LOGIN MODAL END */}
    </>
  );
}

const mapStateToProps = (state) => ({
  error: state.login.error,
});

const mapDispatchToProps = {};
export default connect(mapStateToProps, mapDispatchToProps)(LoginModal);
